// 工单搜索 // data-url="part/basedata/partMaintainPicking/

<template>
  <div>
    <FormPanel ref="formPanel" :list="orderList" :cols="3" :labelWidth="110" formType="add" :isSubmitBtn="false" @formChange="searchRepairOrder"></FormPanel>
    <el-row>
      <el-button size="small" type="primary" :loading="addBtnState" @click="queryClick">查 询</el-button>
      <el-button size="small" type="primary" :loading="addBtnState" @click="resetClick">重 置</el-button>
    </el-row>
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      selectionType="single"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="arr => (this.onChangeColumn = arr)"
    ></FilterTable>
    <el-row>
      <el-button type="primary" :loading="addBtnState" @click="saveDialog">确 定</el-button>
      <el-button @click="closeDialog">取 消</el-button>
    </el-row>
  </div>
</template>

<script>
import { searchRepairOrder } from '@/pages/repair/order/repairMaterials/api/index.js';
import util from './../common/util';

export default {
  name: 'gdcx',
  data() {
    return {
      // 表单
      orderList: this.createFormList(),
      addBtnState: null,
      // 表格
      fetchApi: searchRepairOrder,
      fetchParams: { xhrAbort: true },
      columns: this.createTableColumns(),
      onChangeColumn: []
    };
  },
  mounted() {
    window.gdcx = this;
  },
  methods: {
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '工单号',
          fieldName: 'roNo',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license',
          placeholder: ''
        },
        {
          type: 'SELECT',
          label: '服务工程师',
          fieldName: 'serviceAdvisor',
          placeholder: '请选择...',
          itemList: []
          // rules: [{ required: true, message: '请选择维修类型', trigger: 'change' }]
        },
        {
          type: 'INPUT',
          label: '车主',
          fieldName: 'owner',
          placeholder: ''
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: ''
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '工单号',
          // sorter: true,
          dataIndex: 'RO_NO'
        },
        {
          title: '工单类型',
          // sorter: true,
          dataIndex: 'RO_TYPE'
        },
        {
          title: '维修类型',
          // sorter: true,
          dataIndex: 'REPAIR_TYPE_NAME'
        },
        {
          title: '车牌号',
          // sorter: true,
          dataIndex: 'LICENSE'
        },
        {
          title: 'VIN',
          // sorter: true,
          dataIndex: 'VIN'
        },
        {
          title: '车主',
          // sorter: true,
          dataIndex: 'OWNER_NAME'
        },
        {
          title: '服务工程师',
          // sorter: true,
          dataIndex: 'serviceName'
        },
        {
          title: '开单日期',
          // sorter: true,
          dataIndex: 'RO_CREATE_DATE'
        },
        {
          title: '工单状态',
          // sorter: true,
          dataIndex: 'RO_STATUS'
        },
        {
          title: '竣工状态',
          // sorter: true,
          dataIndex: 'COMPLETE_TAG'
        },
        {
          title: '锁定人',
          // sorter: true,
          dataIndex: 'lockName'
        },
        {
          title: '预交车时间',
          // sorter: true,
          dataIndex: 'END_TIME_SUPPOSED'
        },
        {
          title: '备件销售单号',
          // sorter: true,
          dataIndex: 'SALES_PART_NO'
        }
      ];
    },
    searchRepairOrder(val) {
      const params = Object.assign({}, val, { offset: 0, xhrAbort: false });
      console.log('工单搜索 formChange', params);
      this.fetchParams = params;
    },
    queryClick() {
      this.$refs.formPanel.SUBMIT_FORM();
    },
    resetClick() {
      this.$refs.formPanel.RESET_FORM();
    },
    saveDialog() {
      if (this.onChangeColumn.length) {
        const obj = util.camelCaseObject(this.onChangeColumn[0]);
        console.log('选中', obj);
        this.$emit('confirmGdcx', obj);
      }
    },
    closeDialog() {
      this.$emit('cancelGdcx', false);
    }
  }
};
</script>

<style lang="less" scoped>
.el-row {
  text-align: center;
}
</style>
